<div x-ref="preview_inner" id="preview_inner">
    {% if preview_available %}
    <img class="w-full! rounded-md border-[1px] border-slate-600 creme:border-stone-400"
           src="{% url 'serve_preview' pdf_id %}"
    />
    {% else %}
    <div class="flex items-center justify-center w-full !h-96 lg:!h-[36rem] !rounded-md border-[1px]
                  border-slate-200 !bg-slate-100 text-slate-700
                  dark:border-slate-600 dark:!bg-slate-700 dark:text-slate-200
                  creme:border-stone-400 creme:!bg-creme-light creme:text-stone-400">
        <svg class="w-24! h-24! py-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
          <!-- source: https://www.svgrepo.com/svg/489003/image -->
          <!-- license: PD License -->
        <path d="M4 17L7.58959 13.7694C8.38025 13.0578 9.58958 13.0896 10.3417 13.8417L11.5 15L15.0858 11.4142C15.8668 10.6332 17.1332 10.6332 17.9142 11.4142L20 13.5M11 9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9ZM6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    {% endif %}
</div>
